<template>
  <router-layout>
    <div class="me">
      <div class="title-box">
        <div class="avatar-box">
          <van-row type="flex" justify="end">
            <van-col span="8">
              <router-link to="/Setting" class="sign-left">
                <van-icon name="setting-o"/>
              </router-link>
            </van-col>
            <van-col span="8" class="avatar-col">
              <div class="upload-box">
                <div class="upload-img">
                  <img class="headimg" :src="info.portrait?info.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'" alt >
                   <tailor class="avatar-container"></tailor>
                </div>
              </div>
              <p class="user-name">{{info.user_name}}</p>
            </van-col>
            <van-col span="8">
              <router-link to="/Signin" class="sign-box">
                <img src="https://gw.alicdn.com/tfs/TB1.JXmPAvoK1RjSZPfXXXPKFXa-32-32.png" width="18" height="18" alt >
                <p>签到</p>
              </router-link>
            </van-col>
          </van-row>
          <div class="bottom-container">
            <router-link to="/Medal" class="bottom-box">
              <img src="https://gw.alicdn.com/tfs/TB1B4RqPpzqK1RjSZFCXXbbxVXa-66-66.png" width="30" height="30" alt >
              <p>我的勋章</p>
            </router-link>
            <router-link to="/Integral" class="bottom-box">
              <img src="https://gw.alicdn.com/tfs/TB1qh0jPBLoK1RjSZFuXXXn0XXa-66-66.png" width="30" height="30" alt >
              <p>我的积分</p>
            </router-link>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="content-container">
          <p class="name-text">论坛</p>
          <div class="detailed-box">
            <router-link :to="{name:'MyPost',query:{id:1}}" class="my-icon">
              <img src="https://gw.alicdn.com/tfs/TB1GyJpPwHqK1RjSZFEXXcGMXXa-114-114.png"  width="38" height="38" alt >
              <p class="my-text">我的贴子</p>
            </router-link>
            <router-link :to="{name:'MyPost',query:{id:2}}" class="my-icon">
              <img src="https://gw.alicdn.com/tfs/TB1Le0fPwDqK1RjSZSyXXaxEVXa-114-114.png" width="38" height="38" alt >
              <p class="my-text">我的收藏</p>
            </router-link>
            <router-link :to="{name:'commentMy',query:{name: 'article'}}" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1MrxoPwHqK1RjSZFPXXcwapXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">评论我的</p>
            </router-link>
            <router-link to="/fabulousMy" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1qStlPwHqK1RjSZFgXXa7JXXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">赞我的</p>
            </router-link>
          </div>
        </div>
        <div class="content-container">
          <p class="name-text">抽奖</p>
          <div class="detailed-box">
            <router-link to="/MyParticipant" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1UxRqPpzqK1RjSZFCXXbbxVXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">我参与的抽奖</p>
            </router-link>
            <router-link to="/MyPrize" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1tx8zPxYaK1RjSZFnXXa80pXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">我的奖品</p>
            </router-link>
          </div>
        </div>
        <div class="content-container">
          <p class="name-text">合理化建议</p>
          <div class="detailed-box">
            <router-link :to="{name:'proposalMyPost',query:{id:1}}" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1GyJpPwHqK1RjSZFEXXcGMXXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">我的贴子</p>
            </router-link>
            <router-link :to="{name:'proposalMyPost',query:{id:2}}" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1Le0fPwDqK1RjSZSyXXaxEVXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">我的收藏</p>
            </router-link>
            <router-link :to="{name:'proposalCommentMy',query:{name:'proposal'}}" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1MrxoPwHqK1RjSZFPXXcwapXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">评论我的</p>
            </router-link>
            <router-link to="/proposalFabulousMy" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1qStlPwHqK1RjSZFgXXa7JXXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">赞我的</p>
            </router-link>
          </div>
        </div>
        <div class="content-container">
          <p class="name-text">成就</p>
          <div class="detailed-box">
            <router-link to="/Medal" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1LDVoPzTpK1RjSZKPXXa3UpXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">勋章</p>
            </router-link>
            <router-link to="/RankingHome" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1T_xpPrrpK1RjSZTEXXcWAVXa-114-114.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">排行榜</p>
            </router-link>
          </div>
        </div>
        <div class="content-container">
          <p class="name-text">其他</p>
          <div class="detailed-box">
            <router-link to="/MyJoin" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1aCc2QhnaK1RjSZFBXXcW7VXa-76-76.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">我报名的活动</p>
            </router-link>
            <router-link :to="{name:'SurveyPartake',query:{id:1}}" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1qDI5QhnaK1RjSZFtXXbC2VXa-76-76.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">我参与的问卷</p>
            </router-link>
            <router-link to="/MyVote" class="my-icon">
              <img
                src="https://gw.alicdn.com/tfs/TB1FYECQhTpK1RjSZFKXXa2wXXa-76-76.png"
                width="38"
                height="38"
                alt
              >
              <p class="my-text">我参与的投票</p>
            </router-link>
          </div>
        </div>
      </div>

    </div>
  </router-layout>
</template>
<script>
import { updatePortrait } from "@/api/admin";
import { reception_fileUpload, get_logout } from "@/api/login";

import TitleItem from "../../components/public/title/title";
import tailor from "@/components/public/tailor/tailorImg";
export default {
  name: "Me",
  components: { TitleItem, tailor },
  data() {
    return {
      info: {},
      portrait: "",
      imgsrc: ""
    };
  },
  methods: {
    setImg(data) {
      this.info.portrait = data;
      this.portrait = data;
      let userData = JSON.parse(localStorage.getItem("user"));
      userData.portrait = data;
      localStorage.setItem("user", JSON.stringify(userData));
      this.image();
    },
    beforeRead(file) {
      let param = new FormData(); //创建form对象
      param.append("file_path", file); //通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      // this.img_path = file.name;
      this.saveImg(param, config);
    },
    saveImg(param, config) {
      this.$toast.loading("上传中");
      this.$http
        .post("/login/reception/htmlfileUpload", param, config)
        .then(res => {
          if (res.data.status == 100) {
            this.info.portrait = res.data.data.file_path;
            this.portrait = res.data.data.file_path;
            let userData = JSON.parse(localStorage.getItem("user"));
            userData.portrait = res.data.data.file_path;
            localStorage.setItem("user", JSON.stringify(userData));
            this.image();
          }
        });
    },
    async image() {
      let par = {
        portrait: this.portrait
      };
      let { data } = await updatePortrait(par);
      if (data.status == 100) {
        this.$toast("头像上传成功");
      }
    },
    openLink(e) {
      if (e == 1) {
        this.$router.push("/Medal");
      }
      if (e == 2) {
        this.$router.push("/Integral");
      }
      if (e == 3) {
        this.$router.push("/Accept");
      }
      if (e == 4) {
        this.$router.push("/RankingHome");
      }
      if (e == 5) {
        this.$router.push("/GainHome");
      }
      if (e == 7) {
        //我的 => 签到
        this.$router.push("/Signin");
      }
      if (e == 8) {
        //我的 => 退出登录
        this.$router.push("/Setting");
      }
    }
  },
  handleFile() {},
  created() {
    this.info = JSON.parse(localStorage.getItem("user"));
    this.info.portrait = localStorage.getItem("headimgurl");
  }
};
</script>
<style lang="scss" scoped>
@import "Me";
</style>
